<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-scatter-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'bar'
    }
  },

  computed: {
    option1 () {
      let yAxis = [{
        name: this.yName,
        nameTextStyle: {
          color: this.nameStyleColor,
          fontSize: this.nameStyleSize,
          padding: this.yNamePad.length > 0 ? this.yNamePad : null
        },
        type: this.yAxisType,
        show: this.showY,
        axisLine: {
          show: this.showYLine,
          lineStyle: {
            color: this.axisLineColor
          }
        },
        axisTick: {
          show: this.showYAxisTick
        },
        axisLabel: {
          show: true,
          formatter: this.yAxisType === 'value' ? '{value}' + this.yLabel : (this.useXAxisFun ? this.axisFunction : '{value}'),
          rotate: this.yLabelRotate,
          textStyle: {
            fontSize: this.axisLabelFontSize,
            color: this.axisLabelColor
          }
        },
        splitLine: {
          show: this.showSplitLine,
          lineStyle: {
            color: [
              this.splitLineColor
            ]
          }
        }
      }]
      if (this.yAxisNumber === '2') {
        yAxis.push({
          name: this.yName1,
          nameTextStyle: {
            color: this.nameStyleColor,
            fontSize: this.nameStyleSize,
            padding: this.yNamePad1.length > 0 ? this.yNamePad1 : null
          },
          type: this.yAxisType,
          show: this.showY,
          axisLine: {
            show: this.showYLine,
            lineStyle: {
              color: this.axisLineColor
            }
          },
          axisTick: {
            show: this.showYAxisTick
          },
          axisLabel: {
            show: true,
            formatter: this.yAxisType === 'value' ? '{value}' + this.yLabel1 : '{value}',
            rotate: this.yLabelRotate1,
            textStyle: {
              fontSize: this.axisLabelFontSize,
              color: this.axisLabelColor
            }
          },
          splitLine: {
            show: this.showSplitLine,
            lineStyle: {
              color: [
                this.splitLineColor
              ]
            }
          }
        })
      }
      return {
        title: {
          show: this.showTitle,
          text: this.titleText,
          subtext: this.subtitleText
        },
        color: this.colors,
        legend: {
          show: this.showLegend,
          left: this.legendLeft === '' ? 'auto' : this.legendLeft,
          top: this.legendTop === '' ? 'auto' : this.legendTop,
          right: this.legendRight === '' ? 'auto' : this.legendRight,
          bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
          itemHeight: parseInt(this.legendHeight),
          itemWidth: parseInt(this.legendWidth),
          icon: this.icon,
          textStyle: {
            color: this.legendColor,
            fontSize: this.legendFontSize,
            padding: [3, 0, 0, 0]
          }
        },
        grid: {
          show: this.showGrid,
          left: this.gridLeft === '' ? 'auto' : this.gridLeft,
          top: this.gridTop === '' ? 'auto' : this.gridTop,
          right: this.gridRight === '' ? 'auto' : this.gridRight,
          bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
          borderWidth: 0,
          containLabel: true
        },
        radar: this.chartType === 'radar' ? {
          shape: this.shape === 'circle' ? 'circle' : 'polygon',
          radius: this.radiusLength,
          startAngle: this.startAngle,
          name: {
            show: this.showName,
            textStyle: {
              color: this.radarNameColor,
              backgroundColor: this.radarNameBgColor,
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          center: [this.radarX, this.radarY],
          triggerEvent: true,
          indicator: this.indicatorData
        } : null,
        tooltip: {
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },
        dataZoom: this.showDataZoom ? {
          start: this.dataZoomStart,
          end: this.dataZoomEnd,
          type: this.dataZoomType,
          xAxisIndex: this.xAxisType === 'category' ? 0 : null,
          yAxisIndex: this.yAxisType === 'category' ? 0 : null
        } : null,
        // visualMap: [{
        //   left: 'right',
        //   top: '10%',
        //   dimension: 2,
        //   min: 0,
        //   max: 250,
        //   itemWidth: 30,
        //   itemHeight: 120,
        //   calculable: true,
        //   text: ['圆形大小'],
        //   textStyle: {
        //     color: '#fff'
        //   },
        //   inRange: {
        //     symbolSize: [10, 70]
        //   },
        //   outOfRange: {
        //     symbolSize: [10, 70],
        //     color: ['rgba(255,255,255,.2)']
        //   },
        //   controller: {
        //     inRange: {
        //       color: ['#c23531']
        //     },
        //     outOfRange: {
        //       color: ['#444']
        //     }
        //   }
        // }, {
        //   left: 'right',
        //   bottom: '5%',
        //   dimension: 6,
        //   min: 0,
        //   max: 50,
        //   itemHeight: 120,
        //   text: ['颜色深浅'],
        //   textStyle: {
        //     color: '#fff'
        //   },
        //   inRange: {
        //     colorLightness: [1, 0.5]
        //   },
        //   outOfRange: {
        //     color: ['rgba(255,255,255,.2)']
        //   },
        //   controller: {
        //     inRange: {
        //       color: ['#c23531']
        //     },
        //     outOfRange: {
        //       color: ['#444']
        //     }
        //   }
        // }],
        xAxis: this.showAxis ? {
          type: this.xAxisType,
          show: this.showX,
          name: this.xName,
          nameTextStyle: {
            color: this.nameStyleColor,
            fontSize: this.nameStyleSize,
            padding: this.xNamePad.length > 0 ? this.xNamePad : null
          },
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: this.showXLine,
            lineStyle: {
              color: this.axisLineColor
            }
          },
          axisTick: {
            show: this.showXAxisTick,
            interval: this.axisTickInterval === '' ? 'auto' : this.axisTickInterval
          },
          axisLabel: {
            show: true,
            formatter: this.xAxisType === 'value' ? '{value}' + this.yLabel : (this.useXAxisFun ? this.axisFunction : '{value}'),
            rotate: this.xLabelRotate,
            textStyle: {
              fontSize: this.axisLabelFontSize,
              color: this.axisLabelColor
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                this.splitLineColor
              ]
            }
          }
        } : null,
        yAxis: this.showAxis ? yAxis : null,
        dataset: {
          source: this.data
        },
        series: this.series
      }
    }
  },

  methods: {
    init () {
      this.chart = window.echarts.init(this.$refs.chart)

      if (this.data.length > 0) {
        this.setSeries()
        // this.setOption()
      }
    },
    setSeries () {
      let length = this.data.length
      let dataBJ = [
        [1,55,9,56,0.46,18,6,"良"],
        [2,25,11,21,0.65,34,9,"优"],
        [3,56,7,63,0.3,14,5,"良"],
        [4,33,7,29,0.33,16,6,"优"],
        [5,42,24,44,0.76,40,16,"优"],
        [6,82,58,90,1.77,68,33,"良"],
        [7,74,49,77,1.46,48,27,"良"],
        [8,78,55,80,1.29,59,29,"良"],
        [9,267,216,280,4.8,108,64,"重度污染"],
        [10,185,127,216,2.52,61,27,"中度污染"],
        [11,39,19,38,0.57,31,15,"优"],
        [12,41,11,40,0.43,21,7,"优"],
        [13,64,38,74,1.04,46,22,"良"],
        [14,108,79,120,1.7,75,41,"轻度污染"],
        [15,108,63,116,1.48,44,26,"轻度污染"],
        [16,33,6,29,0.34,13,5,"优"],
        [17,94,66,110,1.54,62,31,"良"],
        [18,186,142,192,3.88,93,79,"中度污染"],
        [19,57,31,54,0.96,32,14,"良"],
        [20,22,8,17,0.48,23,10,"优"],
        [21,39,15,36,0.61,29,13,"优"],
        [22,94,69,114,2.08,73,39,"良"],
        [23,99,73,110,2.43,76,48,"良"],
        [24,31,12,30,0.5,32,16,"优"],
        [25,42,27,43,1,53,22,"优"],
        [26,154,117,157,3.05,92,58,"中度污染"],
        [27,234,185,230,4.09,123,69,"重度污染"],
        [28,160,120,186,2.77,91,50,"中度污染"],
        [29,134,96,165,2.76,83,41,"轻度污染"],
        [30,52,24,60,1.03,50,21,"良"],
        [31,46,5,49,0.28,10,6,"优"]
      ]
      let itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
      this.series = []

      this.series.push({
        type: this.chartType,
        // itemStyle: itemStyle,
        data: dataBJ
      })

      console.log(this.option)
    },
    setOption () {
      if (this.data.length > 0) {
        this.chart.setOption(this.option, true)
        if (this.useLiandong) {
          this.chart.off('click')
          this.chart.on('click', this.handleclick)
        }
        this.resize()
      }
    }
  },

  watch: {
    // dataLength () {
    //   this.setSeries()
    // },
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
